<template>
  <div style="background-color: #EAEAEA;">
    <div class="zan-panel" v-for='(item,index) in payTransactions' :key="index" @click="showOtherData(index)">
      <div class="cell field" style="font-weight: bold;">
        <div class="field__title">消费</div>
        <div class="field__input" style="text-align:right;">-￥{{item.pay_amount/100}}</div>
      </div>
      <div class="cell field">
        <div class="field__title">订单编号</div>
        <div class="field__input cell__bd">{{item.order_no}}</div>
      </div>
      <div class="cell field">
        <div class="field__title">订单金额</div>
        <div class="field__input cell__bd">￥{{item.sub_item_total/100}}</div>
      </div>
      <div class="cell field">
        <div class="field__title">折扣金额</div>
        <div class="field__input cell__bd">￥{{item.discount_amount/100}}</div>
      </div>
      <div class="cell field">
        <div class="field__title">卡内余额</div>
        <div class="field__input cell__bd">￥{{item.balance/100}}</div>
      </div>
      <div class="cell field">
        <div class="field__title">消费门店</div>
        <div class="field__input cell__bd">{{item.shop_name}}</div>
      </div>
      <div v-if="activeIndex == index">
        <!--<div class="cell field">
          <div class="field__title">消费类型</div>-->
        <div class="cell field">
          <div class="field__title">支付方式</div>
            <div class="field__input cell__bd">
              <div v-for="(payItem,payIndex) in item.pay_items" :key="payIndex">
                <div v-if="payItem.pay_type=='pay'">
                  {{payItem.pay_method_name}} ￥{{payItem.pay_amount/100}}
                </div>
              </div>
           </div>
        </div>
        <div class="cell field">
          <div class="field__title">折扣详情</div>
          <div class="field__input cell__bd">
            <div v-for="(payItem,payIndex) in item.pay_items" :key="payIndex">
              <div v-if="payItem.pay_type=='discount'">
                {{payItem.pay_method_name}} ￥{{payItem.pay_amount/100}}
              </div>
            </div>
          </div>
        </div>
        <!--<div class="cell field">
          <div class="field__title">优惠券</div>
          <div class="field__input cell__bd">
            <div v-for="(discount,discountIndex) in item.discount_items" :key="discountIndex">{{discount.item_name}}</div>
          </div>
        </div>-->
        <div class="cell field">
          <div class="field__title">消费时间</div>
          <div class="field__input cell__bd">{{item.created_at}}</div>
        </div>
        <div class="cell field">
          <div class="field__title">消费赠送</div>
          <div class="field__input cell__bd">
            <div>积分 {{item.point}}</div>
            <div>经验值 {{item.experience}}</div>
            <div>金额 {{item.give_amount}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import api from '@/utils/api'
import {formatTime} from '@/utils/index'
import { mapState, mapActions ,mapGetters } from 'vuex'
export default {
  data () {
    return {
      payTransactions:[],
      activeIndex:-1,
      pay_tran_page:1,
    }
  },
  computed: {
    ...mapGetters([
      'user',
    ])
  },
  methods: {
    showOtherData(index){
      this.activeIndex = index
    }
  },
  async onReachBottom(){
    this.page += 1
    let result = await api.findPayTrans({user_id:this.user.id,page:this.page,limit:10,status:'success'})
    if (result.code == 0) {
      result.data.data.forEach((item,index)=>{
        item.created_at = formatTime(item.created_at)
      })
      let payTransactions = _.cloneDeep(this.payTransactions)
      payTransactions = payTransactions.concat(result.data.data)
      this.payTransactions = payTransactions
    }
  },
  async mounted () {
    this.activeIndex = -1
    this.page = 1
    let payTrans = await api.findPayTrans({user_id:this.user.id,page:this.page,limit:10,status:'success'})
    if (payTrans.code == 0) {
      payTrans.data.data.forEach(item=>{
        item.created_at = formatTime(item.created_at)
      })
      this.payTransactions = payTrans.data.data
    }
  }
}
</script>

<style >
.tab-h{
  width: 100%;
  display: flex;
  flex-direction:row;
  line-height: 40px;
  height:40px;
  font-size: 20px;
  background: white;
}
.tab-item{
  width: 50%;
  display: inline-block;
  text-align: center;
}
.tab-item.active{
  position: relative;
}
.tab-item.active:after{
  content: "";
  display: block;
  height: 4px;
  width: 80px;
  background: #4F4F4F;
  position: absolute;
  bottom: 0;
  left:50%;
  transform: translate(-50%);
  border-radius: 1px;
}
.card{
  width: 90%;
  margin: 10px auto;
  background: white;
  border-radius: 20px;
}
.cell{
  position:relative;
  padding:5px;
  display:flex;
  align-items:center;
  line-height:1.4;
  font-size:15px;
}
.cell::after{
  content:'';
  position:absolute;
  top:0;
  left:0;
  width:190%;
  height:200%;
  transform:scale(.5);
  transform-origin:0 0;
  pointer-events:none;
  box-sizing:border-box;
  border:0 solid #e5e5e5;
  border-bottom-width:1px;
  left:15px;right:0
}
.field{
  padding:3px 15px;
  color:#333;
  background: white;
}
.field__title{
  color:#333;
  min-width:65px;
  padding-right:20px;
}
.field__input{
  flex:1;
  line-height:1.6;
  padding:4px 0;
  min-height:22px;
  height:auto;
  font-size:15px;
}
.cell__bd{
  flex:1;
}
</style>
